<template>
    <div class="loginContainer">
        <div class="menuBox" v-for="item in menus">
            <div @click="todetail(item.url)">{{ item.id + '.' + item.name }}</div>
        </div>

    </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const menus: any = ref([
    {
        name: '登录(pinia学习)',
        id: 1,
        url: '/Login'
    },
    {
        name: 'el-check省市区选择组件',
        id: 2,
        url: '/RegionChose'
    },
    {
        name: '在浏览器中利用浏览器api操作文件',
        id: 3,
        url: '/FilesOpera'
    },
    {
        name: 'ts面试题(详见同层Interview.md文件)',
        id: 4,
        url: '/'
    },
    {
        name: 'vue中读取excel文件内的内容',
        id: 5,
        url: '/GetExcelContent'
    },
    {
        name: 'Tesseract.js实现OCR文字识别',
        id: 6,
        url: '/Tesseract'
    },
    {
        name: '读取本地txt文件',
        id: 7,
        url: '/ReadTxt'
    },
    {
        name: '自定义指令',
        id: 8,
        url: '/CustomInstruct'
    },
    {
        name: '随机生成图片库Lorem Picsum',
        id: 9,
        url: '/LoremPicsum'
    },
    {
        name: 'three.js的使用1',
        id: 10,
        url: '/ThreeCase'
    },
     {
        name: 'three.js的使用2',
        id: 11,
        url: '/ThreeDemo'
    },
    {
        name: 'three.js的使用3-容器设置',
        id: 12,
        url: '/ThreeCaseBox'
    },
    {
        name: 'css效果-文字贴合背景',
        id: 13,
        url: '/TextFitsBackground'
    },
    {
        name: 'canvas实现签名',
        id: 14,
        url: '/Signature'
    },
    {
        name: '自定义组件,elementplus等ui组件的自动导入',
        id: 15,
        url: '/AutoImport'
    },
    {
        name: 'vue中引入图片等静态资源的几种方式',
        id: 16,
        url: '/ImportImg'
    },
    
])

const todetail=(url:any)=>{
    router.push({ path: url})
}
</script>
<style lang="scss" scoped>
.loginContainer {
    background: url("../assets/svg/bg.svg");
    height: 100vh;
    width: 100vw;
    padding:30px;
    box-sizing: border-box;
}
.menuBox{
    display:flex;
    direction:column;
    margin-bottom:10px;
    cursor:pointer;
}
</style>
  